<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
		<style>
			html{
				height: 1080px;
				width: 5760px;
			}
			body{
				height: 1080px;
				width: 5760px;
                overflow:hidden;
				background: url(img/bg.jpg) no-repeat;
				background-size: 100% 100%;
				color: white;
			}
			.bgFlash {
				height: 1080px;
				width: 5760px;
				position: absolute;
				left: 0;
				top: 0;
			}
			.box{
				position: absolute;
				top: 124px;
				height: 925px;
				width: 5760px;
				display: flex;
			}
			.top{
				position: absolute;
    			width: 100%;
				height: 120px;
				border-bottom: 4px solid #7ab7dc;
				margin: 0 100px;
				font-size: 34px;
			}
			.top img{
				float: left;
				margin: 30px 0;
				margin-right: 50px;
			}
			.top p{
				line-height: 124px;
			}
			.bt{
				height: 64px;
				line-height: 64px;
				border-bottom: 4px dashed #7ab7dc;
				font-size: 30px;
			}
			.box-left-top,
			.box-left-center
			{
				margin: 0 25px;
				margin-top: 60px;
				display: flex;
				justify-content: space-around;
			}
			.box-left-bottom
			{
				margin-top: 80px;
				display: flex;
				justify-content: space-around;
			}
			.box-left-top div{
				text-align: center;
				line-height: 40px;
			}
			.box-left-top p{
				font-size: 25px;
				font-weight: bold;
			}
			.box-left-top a{
				font-size: 18px;
			}
			.box-left-top b{
				font-size: 38px;
			}
			.box-left-center div{
				width: 251px;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
			}
			.box-left-center a{
				display: flex;
				width: 183px;
				height: 183px;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
			}
			.box-left-center p{
				margin-top: 20px;
				font-size: 20px;
				text-align: center;
			}
			.box-left-center b{
				font-size: 50px;
				margin-top: -15px;
			}
			.box-left-bottom div{
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
			}
			.box-left-bottom h1{
				font-weight: bold;
			}
			.box-left-bottom a{
				width: 200px;
				margin: 5px 20px;
				text-align: center;
				line-height: 35px;
			}
			.box-left-bottom p{
				width: 100%;
				margin: 5px 0;
				text-align: center;
			}
			.box-left-bottom b{
				font-size: 30px;
				margin: 0 5px;
			}
			.sanjiao{
				width: 0;
				height: 0;
				margin-top: 5px;
				border-width: 15px;
				border-style: solid;
			}
			.box-bottom-left{
				margin-top: 20px;
				float: left;
				width: 590px;
				height: 500px;
			}
			.box-bottom-left img{
				position: absolute;
				top: 390px;
			}
            .gwtzleft div {
                position: absolute;
                width:200px;
                height:61px;
                text-align:center;
            }
			.box-bottom-left p{
				font-size: 12px;
				text-align: center;
			}
			.box-bottom-left b{
				font-size: 34px;
			}
			
			.box-bottom-right{
				margin-top: 20px;
				position: relative;
				float: right;
				width: 600px;
				height: 500px;
			}
			.box-bottom-right-top{
				height: 370px;
				margin: 0 10px;
				border-bottom: 3px solid #064792;
			}
			.box-bottom-right-top img{
				position: absolute;
			}
			.box-bottom-right-top p{
				font-size: 24px;
			}
			.box-bottom-right-top div{
				float: right;
				margin-top: 25px;
				display: flex;
				justify-content: center;
			}
			.box-bottom-right-top a{
				display: block;
				width: 100px;
				margin: 0 10px;
				border-radius: 50px;
				text-align: center;
				font-size: 16px;
			}
			.box-bottom-right-top b{
				font-size: 30px;
				margin: 0 3px;
			}
			.box-bottom-right-bottom{
				height: 200px;
			}
			.box-bottom-right-bottom img{
				position: absolute;
			}
			.box-bottom-right-bottom div{
				float: right;
				margin-top: 25px;
				display: flex;
				justify-content: center;
			}
			.box-bottom-right-bottom a{
				display: block;
				width: 100px;
				margin: 0 10px;
				border-radius: 50px;
				text-align: center;
				font-size: 16px;
			}
			.box-bottom-right-bottom p{
				width: 350px;
				font-size: 14px;
			}
			.box-center-left{
				float: left;
				margin-top: 20px;
				margin-left: -50px;
				width: 690px;
				height: 350px;
			}
			.box-center-left p{
				width: 300px;
				float: right;
				margin-top: 10px;
			}
			.tu{
				position: absolute;
				top: 240px;
				left: 2895px;
				width: 300px;
			}
			.tu a{
				display: block;
				text-align: center;
			}
			.box-center-right{
				float: right;
				margin-top: 20px;
				width: 600px;
				height: 350px;
			}
			.box-center-botright{
				position: relative;
				float: right;
				width: 620px;
				height: 400px;
			}
			.box-center-botright img{
				position: absolute;
			}
			.box-right p{
				font-size: 24px;
				margin-top: 10px;
			}
			.box-right-flex{
				width: 100%;
				margin-top: 10px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
			}
			.box-right-flex a{
				display: block;
				width: 155px;
				height: 109px;
				border-radius: 20px;
				overflow: hidden;
			}
			.box-right-flex p{
				font-size: 18px;
				text-align: center;
				margin-top: 10px;
			}
			.box-right-flex-zhu{
				width: 100%;
				margin-top: 95px;
				position: relative;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
			}
			.box-right-flex-zhu div{
				width: 120px;
				margin-top: 30px;
				margin-bottom: 30px;
				height: 140px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
			}
			.box-right-flex-zhu p{
				margin-top: 20px;
				height: 60px;
				font-size: 16px; 
			}
			.box-right-flex-zhu p:nth-child(3){
				height: 20px;
				margin-top: 10px;
			}
			.box-yjf-top
			{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
			}
			.box-yjf-bottom
			{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
			}
			.box-yjf-top div{
				width: 160px;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
			}
			.box-yjf-top a{
				display: flex;
				width: 110px;
				height: 110px;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
			}
			.box-yjf-top p{
				margin-top: 10px;
				margin-bottom: 20px;
				font-size: 16px;
				font-weight: bold;
				text-align: center;
			}
			.box-yjf-top b{
				font-size: 40px;
			}
			.box-yjf-bottom div{
				text-align: center;
				line-height: 40px;
			}
			.box-yjf-bottom p{
				font-size: 18px;
				font-weight: bold;
			}
			.box-yjf-bottom a{
				font-size: 18px;
			}
			.box-yjf-bottom b{
				font-size: 38px;
			}
			.gaikuang{
				position: absolute;
				top: 88px;
				height: 468px;
			}
			.gaikuang a{
				position: absolute;
				width: 395px;
				top: 0px;
				left: 0px;
				font-size: 28px;
			}
			.gaikuang img{
				position: absolute;
				top: 0px;
				left: 50px;
			}
			.gaikuang p{
				position: absolute;
				width: 375px;
				top: 160px;
				left: 565px;
				font-size: 22px;
				letter-spacing: 2px;
			}
			.rongyu{
				position: absolute;
				top: 556px;
			}
			.rongyu a{
				position: absolute;
				width: 395px;
				top: 0px;
				left: 0px;
				font-size: 28px;
			}
			.rongyu .kuai{
				position: absolute;
				width: 1035px;
				height: 220px;
				top: 95px;
				left: 0px;
				display: flex;
				justify-content: space-between;
			}
			.rongyu .kuai div{
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				align-content: space-around;
			}
			.rongyu .kuai div img{
				width: 231px;
			}
			.rongyu .kuai div p{
				font-size: 20px;
			}
			.box-center-bottom{
				position: absolute;
				width: 1260px;
			}
			.box-center-bottom p{
				font-size: 22px;
			}
			.box-center-botleft{
				position: absolute;
				top: 55px;
				left: 290px;
				width: 495px;
				height: 360px;
				background-size: 100% 100%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			.box-center-botleft div{
				display: flex;
				width: 110px;
				height: 105px;
				justify-content: center;
				flex-wrap: wrap;
				align-content: space-between;
				margin-right: 3px;
			}
			.box-center-botleft img{
				width: 100px;
				height: 67px;
				border-radius: 15px;
			}
			.box-center-botleft p{
				font-size: 18px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<canvas class="bgFlash" id="bgFlash"></canvas>
		<div class="top">
			<img src="img/链接.png"/>
			<p>智能连接/“天地空一体”的通信保障</p>
		</div>
		<div class="box">
			<div style="width: 960px;margin: 0 100px;">
				<div class="bt">企业荣誉</div>
				<div>
					<div class="gaikuang">
						<a>台州电信概况</a>
						<img src="img/map6.png" />
						<p>台州电信成立于1998年9月8日。下辖椒江、黄岩、路桥三个分局，及临海、温岭、天台、三门、仙居、玉环六个县（市）分公司</p>
					</div>
					<div class="rongyu">
						<a>获得荣誉</a>
						<div class="kuai">
							<div>
								<img src="img/2009年全国文明单位.png"/>
								<p>2009年全国文明单位</p>
							</div>
							<div>
								<img src="img/2009年全国五一劳动奖.png"/>
								<p>2009年全国五一劳动奖</p>
							</div>
							<div>
								<img src="img/“全国工人先锋号”称号.png"/>
								<p>“全国工人先锋号”称号</p>
							</div>
							<div>
								<img src="img/2019年“十佳上云”标杆案例.png"/>
								<p>2019年“十佳上云”标杆案例</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="width: 1260px;margin-right: 140px;">
				<div class="bt">光网建设,助推“网络强国”</div>
				<div class="box-left-top" style="height: 210px;margin-top: 0;position: relative;top: 30px;">
					<div id="ech_n_1" style="height: 100%;width: 100%;"></div>
				</div>
				<div class="bt">光网台州</div>
				<div>
					<div class="box-bottom-left">
						<img src="img/map.png"/>
						<img src="img/map-line.png" />
						<img src="img/map-dian.png" height="437px" style="margin-left: 100px;margin-top: 18px;" />
						<img src="img/map-name.png" />
						<img src="img/map-line1.png" style="top: 435px;left: 1440px;" />
						<div class="gwtzleft">
						<div style="color: #faf829;top: 370px;left: 1560px;">
							<b>2.0T</b>
							<p>idc出口带宽</p>
						</div>
						<div style="color: #f10076;top: 510px;left: 1560px;">
							<b>2.0T</b>
							<p>城域带宽</p>
						</div>
						<div style="color: #94cd25;top: 615px;left: 1560px;">
							<p><b>230</b>个</p>
							<p>机架</p>
						</div>
						<div style="color: #dc700c;top: 725px;left: 1560px;">
							<p><b>90</b>万户</p>
							<p>宽带用户数</p>
						</div>
                    </div> 
					</div>
					<div class="box-bottom-right">
						<div class="box-bottom-right-top">
							<p>部署ROADM,全省首次全光层灵活调度</p>
							<img src="img/roadm.png" style="top: 40px;left: 0;" />
							<img src="img/txt.png" style="top: 80px;left: 250px;" />
							<img src="img/map2.png" style="top: 50px;right: 0;" />
						</div>
						<div class="box-bottom-right-bottom">
							<img src="img/logo.png" style="bottom: 40px;left: 0;" />
							<div>
								<a style="background: #dc700c;"><b>60</b>万</a>
								<a style="background: #94cd25;"><b>15</b>万小时</a>
								<a style="background: #f10076;"><b>400</b>G</a>
							</div>
							<div>
								<p>台州承载天翼高清用户60万，存储能力折合15万小时高清内容，具体专用分发网络能力400G。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="width: 1260px;margin-right: 120px;">
				<div class="bt">领先的移动网络</div>
				<div style="height: 370px;">
					<div class="box-center-left">
						<img src="img/map3.png" style="margin-top: 10px;float: left;" />
						<p>全球最大的FDD-LTE运营商，全方位通信服务覆盖省内所有地区。</p>
						<p>全面实现近海航道，海岛80海里范围内的2G/3G/4G连续覆盖，是省内覆盖范围最广、覆盖质量最优的运营商。</p>
						<img src="img/map-line3.png" style="position: absolute;top: 220px;left: 2835px;"/>
						<div class="tu">
							<img src="img/tu.jpg" width="300px" height="170px" />
							<a>台州海域测试图</a>
						</div>
					</div>
					<div class="box-center-right">
					<div id="ech_n_2" style="height: 100%;width: 100%;"></div>
					</div>
				</div>
				<div class="bt">天翼5G在台州</div>
				<div class="box-center-bottom">
					<p style="position: absolute;top: 10px;left: 10px;">5G三大特点</p>
					<img src="img/quan.png"  style="position: absolute;top: 100px;left: 10px;width: 250px;" />
					<p style="position: absolute;top: 10px;left: 290px;">5G十大重要行业及应用场景</p>
					<div class="box-center-botleft">
						<div>
							<img src="img/智慧城市.png" />
							<p>智慧城市</p>
						</div>
						<div>
							<img src="img/安防.png" />
							<p>安防</p>
						</div>
						<div>
							<img src="img/教育.png" />
							<p>教育</p>
						</div>
						<div>
							<img src="img/交通物流.png" />
							<p>交通物流</p>
						</div>
						<div>
							<img src="img/医疗.png" />
							<p>医疗</p>
						</div>
						<div>
							<img src="img/制造.png" />
							<p>制造</p>
						</div>
						<div>
							<img src="img/融媒体.png" />
							<p>融媒体</p>
						</div>
						<div>
							<img src="img/能源电力.png" />
							<p>能源电力</p>
						</div>
						<div>
							<img src="img/文旅.png" />
							<p>文旅</p>
						</div>
						<div>
							<img src="img/家庭娱乐.png" />
							<p>家庭娱乐</p>
						</div>
					</div>
					<p style="position: absolute;top: 10px;left: 750px;">ITU定义5G三大应用场景：eMBB,mMTC,uRLLC</p>
					<img src="img/san.png"  style="position: absolute;top: 57px;left: 720px;"/>
				</div>
			</div>
			<div  style="width: 960px;margin-right: 140px;">
				<div class="bt">窄带物联网</div>
				<div class="box-right">
					<p>2017年9月中国电信提供全球首家商用规模最大、覆盖最广和效果最好的“窄带物联网(NB-IOT)”，NB-IoT是未来5G时代实现万物互联的一个重要支点。</p>
					<p>窄带物联网的四大优势</p>
					<div class="box-right-flex">
						<img src="img/ys1.png" />
						<img src="img/ys2.png" />
						<img src="img/ys3.png" />
						<img src="img/ys4.png" />
					</div>
					<div id="ech_n_5" style="height: 200px;width: 960px;position: absolute;"></div>
					<div class="box-right-flex-zhu">
						<div>
							<p>台州电信开通首个NB-IoT小区</p>
							<img src="img/zhu.png"/>
							<p style="color: #4bbeed;">2017年7月</p>
						</div>
						<div>
							<p>台州首张物 联网建成正 式投入使用</p>
							<img src="img/zhu1.png"/>
							<p style="color: #4bbeed;">2017年9月</p>
						</div>
						<div>
							<p>完成全市覆盖</p>
							<img src="img/zhu1.png"/>
							<p style="color: #4bbeed;">2018年4月</p>
						</div>
						<div>
							<p>台州物联网NB -IoT物联网拥有 6000个小区</p>
							<img src="img/zhu.png"/>
							<p style="color: #4bbeed;">2018年12月</p>
						</div>
					<a style="border-bottom: 3px solid #064792;position: absolute;width: 960px;left: 0;bottom: 37px;"></a>
					</div>
					<p>窄带物联网7大应用场景</p>
					<div class="box-right-flex">
						<img src="img/cj1.png" />
						<img src="img/cj2.png" />
						<img src="img/cj3.png" />
						<img src="img/cj4.png" />
						<img src="img/cj5.png" />
						<img src="img/cj6.png" />
						<img src="img/cj7.png" />
					</div>
					<p style="margin: 20px 0;">全市NB-IoT商用项目28个，2018-2019年用户发展50万户，2020年用户规模预计发展50万户。</p>
					<div class="box-right-flex">
						<div>
							<a><img src="img/tu1.png"/></a>
							<p>智能燃气抄表</p>
						</div>
						<div>
							<a><img src="img/tu2.png"/></a>
							<p>智慧水务</p>
						</div>
						<div>
							<a><img src="img/tu3.png"/></a>
							<p>智慧路灯</p>
						</div>
						<div>
							<a><img src="img/tu4.png"/></a>
							<p>智能停车</p>
						</div>
					</div>
				</div>
			</div>
			<div style="width: 620px;">
				<div class="bt">卫星通信</div>
				<p style="font-size: 28px; margin: 10px 0 0 0;">国内唯一拥有卫星通信的运营商</p>
				<p style="font-size: 22px; margin: 5px 0 10px 0;">“天通一号”卫星在防台抢险、抗洪救灾中发挥重要作用。</p>
				<video src="mv/浙江海洋卫星视频《茫茫大海永不失联》.mp4" muted autoplay loop width="600px" height="400px" poster="img/tu3.jpg">
				  您的浏览器不支持 video 标签。
				</video>
				<p style="font-size: 28px; margin: 10px 0;">云机房</p>
				<div class="box-yjf">
					<div class="box-yjf-top">
						<div>
							<a style="font-size: 18px;border: 6px solid #00a7f2;color: #00a7f2;"><b>277</b>个</a>
							<p style="color: #00a7f2;"> 已部署政务云单位</p>
						</div>
						<div>
							<a style="font-size: 18px;border: 6px solid #e90044;color: #e90044;"><b>350</b>个</a>
							<p style="color: #e90044;"> 已部署政务云项目</p>
						</div>
						<div>
							<a style="font-size: 18px;border: 6px solid #aacc06;color: #aacc06;"><b>1817</b>个</a>
							<p style="color: #aacc06;"> 已部署政务云虚拟机</p>
						</div>
					</div>
					<div class="box-yjf-bottom">
						<div>
							<img src="img/yjf1.png" width="55px" />
							<p>完成投资</p>
							<a style="color: #4bbeed;"><b>1.2</b>亿元</a>
						</div>
						<div>
							<img src="img/yjf2.png" width="55px" />
							<p>机房面积</p>
							<a style="color: #d9e249;"><b>1.5</b>万平方米</a>
						</div>
						<div>
							<img src="img/yjf3.png" width="55px" />
							<p>标准机柜服务能力</p>
							<a style="color: #4bbeed;"><b>1300</b>个</a>
						</div>
						<div>
							<img src="img/yjf4.png" width="55px" />
							<p>规划出口带宽</p>
							<a style="color: #d9e249;"><b>600</b>G</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/echarts.min.js" ></script>
		<script type="text/javascript">
			ech_n_1();
			ech_n_2();
//			ech_n_3();
//			ech_n_4();
			ech_n_5();
			function ech_n_1(){
				$.ajax({
			        type: 'get',
			        url: "new_file.json",//请求数据的地址
			        dataType: "json",        //返回数据形式为json
			        success: function (result) {	
			    var myChart = echarts.init(document.getElementById("ech_n_1"));
				var data_dongtai = [{
				name: "光网覆盖",
				value: 100,
				total:100
			}, {
				name: "FTTH覆盖率",
				value: 95,
				total:100
			},{
				name: "光端口数",
				value: 320,
				total:350
			}, {
				name: "普遍提供千兆入户",
				value: 1000,
				total:1000
			}];
			var radius = [90, 98];
			var h = ['11%', '35%', '58%', '81%']
			var w = ['50%', '50%', '50%', '50%']
			var color1 = ['#f9bc00', '#8ac22d', '#209ad7', '#e6e636']
			var color2 = ['#f19701', '#47b132', '#007ecb', '#b2d000']
			var label_dongtai = [];
			for(var i = 0; i < data_dongtai.length; i++) {
				label_dongtai.push(data_dongtai[i].name);
			}
			
			option = {
				series: []
			};
			for(var i = 0; i < data_dongtai.length; i++) {
				option.series.push({
					type: 'pie',
					startAngle: 140,
					center: [h[i], w[i]],
					radius: radius,
					hoverAnimation: false,
					label: {
						show: true,
						fontSize:15,
						padding: [40, 0,0,0],
						position: 'center',
						formatter: function(val) { //让series 中的文字进行换行
							var value = 1;
							var tit = "";
							switch(val.name){
								case '光网覆盖':
								value = val.value;
								tit = "%";
								break;
								case 'FTTH覆盖率':
								value = ">"+val.value;
								tit = "%";
								break;
								case '光端口数':
								value = val.value;
								tit = "万";
								break;
								case '普遍提供千兆入户':
								value = val.value;
								tit = "Mbps";
								break;
							}
							return "{a|"+value+"}"+"{b|"+tit+"}"+"\n"+ val.name.split("-").join("\n");
						},
						rich:{
							a:{
						fontSize: 48,
							},
							b:{
						fontSize: 22,
							}
							}
					},
					x: '0%',
					itemStyle: {
						normal: {
							color: color1[i],
							
						}
					},
					data: [{
						name: data_dongtai[i].name,
						value: data_dongtai[i].value,
					}, {
						name: '',
						value: data_dongtai[i].total - data_dongtai[i].value,
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								},
								color: 'rgba(0,0,0,0)',
								borderColor: 'rgba(0,0,0,0)',
								borderWidth: 0
							}
						}
					}]
				},{
					center: [h[i], w[i]],
			        radius: [83, 93],
			        hoverAnimation: false,
			        type: "pie",
					startAngle: 140,
			        data: [{
						name: data_dongtai[i].name,
						value: data_dongtai[i].value,
			            label: {
			                normal: {
			                    show: false,
			                    position: "center"
			                }
			            },
			            labelLine: {
			                show: false
			            },
			            itemStyle: {
			                normal: {
			                    color: color2[i],
			                },
			            },
			        }, {
						name: '',
						value: data_dongtai[i].total - data_dongtai[i].value,
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								},
								color: 'rgba(0,0,0,0)',
								borderColor: 'rgba(0,0,0,0)',
								borderWidth: 0
							}
						}
					}]
			    
				}
				);
			};
			
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}
			        },
			    });
			
			}
			function ech_n_2(){
				$.ajax({
			        type: 'get',
			        url: "new_file.json",//请求数据的地址
			        dataType: "json",        //返回数据形式为json
			        success: function (result) {	
			    var myChart = echarts.init(document.getElementById("ech_n_2"));
				var data_dongtai = [{
				name: "网上用户-到达数",
				value: 140,
				total:150
			}, {
				name: "日均流量",
				value: 360,
				total:400
			},{
				name: "室外物理-站点数",
				value: 7500,
				total:30000
			}, {
				name: "分布系统",
				value: 2800,
				total:4000
			}];
			var radius = [70, 78];
			var h = ['30%', '65%', '30%', '65%']
			var w = ['25%', '25%', '75%', '75%']
			var color1 = ['#b50081','#209ad7','#f9bc00', '#8ac22d']
			var color2 = ['#87086d','#007ecb','#f19701', '#47b132']
			var label_dongtai = [];
			for(var i = 0; i < data_dongtai.length; i++) {
				label_dongtai.push(data_dongtai[i].name);
			}
			
			option = {
				series: []
			};
			for(var i = 0; i < data_dongtai.length; i++) {
				option.series.push({
					type: 'pie',
					center: [h[i], w[i]],
					radius: radius,
					hoverAnimation: false,
					label: {
						show: true,
						fontSize:18,
						fontWeight:'bold',
						padding: [45, 0,0,0],
						position: 'center',formatter: function(val) { //让series 中的文字进行换行
							var value = 1;
							var tit = "";
							switch(val.name){
								case '网上用户-到达数':
								value = val.value;
								tit = "万";
								break;
								case '日均流量':
								value = val.value;
								tit = "T";
								break;
								case '室外物理-站点数':
								value = val.value;
								tit = "";
								break;
								case '分布系统':
								value = val.value;
								tit = "套";
								break;
							}
							return "{a|"+value+"}"+"{b|"+tit+"}"+"\n"+ val.name.split("-").join("\n");
						},
						rich:{
							a:{
						fontSize: 43,
						fontWeight:'bold',
							},
							b:{
						fontSize: 18,
						fontWeight:'bold',
							}
						}
					},
					x: '0%',
					itemStyle: {
						normal: {
							color: color1[i],
							
						}
					},
					data: [{
						name: data_dongtai[i].name,
						value: data_dongtai[i].value,
					}, {
						name: '',
						value: data_dongtai[i].total - data_dongtai[i].value,
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								},
								color: 'rgba(0,0,0,0)',
								borderColor: 'rgba(0,0,0,0)',
								borderWidth: 0
							}
						}
					}]
				},{
					center: [h[i], w[i]],
			        radius: [65, 71],
			        hoverAnimation: false,
			        type: "pie",
			        data: [{
						name: data_dongtai[i].name,
						value: data_dongtai[i].value,
			            label: {
			                normal: {
			                    show: false,
			                    position: "center"
			                }
			            },
			            labelLine: {
			                show: false
			            },
			            itemStyle: {
			                normal: {
			                    color: color2[i],
			                },
			            },
			        }, {
						name: '',
						value: data_dongtai[i].total - data_dongtai[i].value,
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								},
								color: 'rgba(0,0,0,0)',
								borderColor: 'rgba(0,0,0,0)',
								borderWidth: 0
							}
						}
					}]
			    
				}
				);
			};
			
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}
			        },
			    });
			
			}
			function ech_n_3(){
				$.ajax({
			        type: 'get',
			        url: "new_file.json",//请求数据的地址
			        dataType: "json",        //返回数据形式为json
			        success: function (result) {	
			    var myChart = echarts.init(document.getElementById("ech_n_3"));
				var data = [
				{
				name: "1",
				value: [907, 2611]
				},
				{
				name: "2",
				value: [1153, 2939]
				},
				{
				name: "3",
				value: [1513, 3346]
				}
				];
				var label ={
			                normal: {
			                    show: true,
			                    color:'#fff',
			                    fontSize:14,
			                    fontWeight:'bold',
			                    position: 'top'
			                }
				}
			option = {
			    color: ['#008cd7','#e40177','#dc700d'],
			    grid: {
			        left: '0',
			        right: '0',
			        top: '10%',
			        bottom: '20%',
			        containLabel: true
			    },
			    xAxis: [
			        {
			            type: 'category',
			            axisLine: {show: false},
			            axisLabel: {show: false},
			            axisTick: {show: false},
			            splitLine: {show: false},
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLine: {show: false},
			            axisLabel: {show: false},
			            axisTick: {show: false},
			            splitLine: {show: false},
			        }
			    ],
			    series: [
			        {
			            type:'bar',
			            label: label,
			            barGap:'10%',
			            data:data[0].value
			        },
			        {
			            type:'bar',
			            label: label,
			            barGap:'10%',
			            data:data[1].value
			        },
			        {
			            type:'bar',
			            label: label,
			            barGap:'10%',
			            data:data[2].value
			        }
			    ]
			};
			
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}
			        },
			    });
			
			}
			function ech_n_4(){
				$.ajax({
			        type: 'get',
			        url: "new_file.json",//请求数据的地址
			        dataType: "json",        //返回数据形式为json
			        success: function (result) {	
			    var myChart = echarts.init(document.getElementById("ech_n_4"));
				var data = [
				{
				name: "1",
				value: [12.32, 50.14, 23.52]
				},
				{
				name: "2",
				value: [4.76, 26.73, 5.54]
				},
				{
				name: "3",
				value: [3.65, 36.15, 30.81]
				}
				];
				var label ={
			                normal: {
			                    show: true,
			                    color:'#fff',
			                    fontSize:14,
			                    fontWeight:'bold',
			                    position: 'top'
			                }
				}
			option = {
			    color: ['#008cd7','#e40177','#dc700d'],
			    grid: {
			        left: '0',
			        right: '0',
			        top: '10%',
			        bottom: '20%',
			        containLabel: true
			    },
			    xAxis: [
			        {
			            type: 'category',
			            axisLine: {show: false},
			            axisLabel: {show: false},
			            axisTick: {show: false},
			            splitLine: {show: false},
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLine: {show: false},
			            axisLabel: {show: false},
			            axisTick: {show: false},
			            splitLine: {show: false},
			        }
			    ],
			    series: [
			        {
			            type:'bar',
			            label: label,
			            barGap:'10%',
			            data:data[0].value
			        },
			        {
			            type:'bar',
			            label: label,
			            barGap:'10%',
			            data:data[1].value
			        },
			        {
			            type:'bar',
			            label: label,
			            barGap:'10%',
			            data:data[2].value
			        }
			    ]
			};
			
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}
			        },
			    });
			
			}
			
			function ech_n_5(){
				$.ajax({
			        type: 'get',
			        url: "new_file.json",//请求数据的地址
			        dataType: "json",        //返回数据形式为json
			        success: function (result) {	
			    var myChart = echarts.init(document.getElementById("ech_n_5"));
				var data_dongtai = [{
				name: "投资金额",
				value: 3,
				total:3
			}, {
				name: "基站数量",
				value: 3500,
				total:3500
			},];
			var radius = [60, 65];
			var h = ['25%', '75%']
			var w = ['40%', '40%']
			var color1 = ['#e6e636', '#f9bc00']
			var color2 = ['#b2d000', '#f19701']
			var label_dongtai = [];
			for(var i = 0; i < data_dongtai.length; i++) {
				label_dongtai.push(data_dongtai[i].name);
			}
			
			option = {
				series: []
			};
			for(var i = 0; i < data_dongtai.length; i++) {
				option.series.push({
					type: 'pie',
					startAngle: 140,
					center: [h[i], w[i]],
					radius: radius,
					hoverAnimation: false,
					label: {
						show: true,
						fontSize:15,
						padding: [30, 0,0,0],
						position: 'center',
						formatter: function(val) { //让series 中的文字进行换行
							var value = 1;
							var tit = "";
							switch(val.name){
								case '投资金额':
								value = val.value;
								tit = "亿";
								break;
								case '基站数量':
								value = val.value;
								tit = "";
								break;
							}
							return "{a|"+value+"}"+"{b|"+tit+"}"+"\n"+ val.name.split("-").join("\n");
						},
						rich:{
							a:{
						fontSize: 36,
							},
							b:{
						fontSize: 15,
							}
							}
					},
					x: '0%',
					itemStyle: {
						normal: {
							color: color1[i],
							
						}
					},
					data: [{
						name: data_dongtai[i].name,
						value: data_dongtai[i].value,
					}, {
						name: '',
						value: data_dongtai[i].total - data_dongtai[i].value,
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								},
								color: 'rgba(0,0,0,0)',
								borderColor: 'rgba(0,0,0,0)',
								borderWidth: 0
							}
						}
					}]
				},{
					center: [h[i], w[i]],
			        radius: [55, 60],
			        hoverAnimation: false,
			        type: "pie",
					startAngle: 140,
			        data: [{
						name: data_dongtai[i].name,
						value: data_dongtai[i].value,
			            label: {
			                normal: {
			                    show: false,
			                    position: "center"
			                }
			            },
			            labelLine: {
			                show: false
			            },
			            itemStyle: {
			                normal: {
			                    color: color2[i],
			                },
			            },
			        }, {
						name: '',
						value: data_dongtai[i].total - data_dongtai[i].value,
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								},
								color: 'rgba(0,0,0,0)',
								borderColor: 'rgba(0,0,0,0)',
								borderWidth: 0
							}
						}
					}]
			    
				}
				);
			};
			
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}
			        },
			    });
			
			}

			//背景动画
function bgFlash(){
    var canvas = document.getElementById('bgFlash'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,

        hue = 217,
        stars = [],
        count = 0,
        maxStars = 800;//星星数量

    var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');

    canvas2.width = 100;
    canvas2.height = 100;

    var half = canvas2.width / 2, gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);

    gradient2.addColorStop(0.025, '#CCC');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

// End cache

    function random(min, max) {
        if (arguments.length < 2) {
            max = min;
            min = 0;
        }

        if (min > max) {
            var hold = max;
            max = min;
            min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function maxOrbit(x, y) {
        var max = Math.max(x, y),
            diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
        //星星移动范围，值越大范围越小，
    }

    var Star = function() {

        this.orbitRadius = random(maxOrbit(w, h));
        //星星大小
        this.radius = random(60, this.orbitRadius) / 20;
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        //星星移动速度
        this.speed = random(this.orbitRadius) / 500000;
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
    };

    Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
            y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
            twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
    };

    for (var i = 0; i < maxStars; i++) {
        new Star();
    }

    function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.5; //尾巴
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
        ctx.fillRect(0, 0, w, h);
        ctx.globalCompositeOperation = 'lighter';
        ctx.drawImage(img,0,0,w,h);
        for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
        }

        requestAnimationFrame(animation);
    }

    animation();
}
var img = new Image();

img.onload = function () {
    bgFlash();
};
img.src = 'img/bg.jpg';

		</script>
	</body>
</html>
